import _ from 'lodash';
import type { GetStaticPropsContext, NextPage } from 'next';
import ReactMarkdown from 'react-markdown';
import Head from 'next/head';
import Emoji from '../Emoji';
import deepReadDir from '../deepReadDir';
import emojiPlugin from '../emojiPlugin';
import fs from 'fs';
import remarkGemoji from 'remark-gemoji';


const MARKDOWN_DIR = '../eug-vs-xyz/src';
const EMOJI_DIR = 'public/emoji';

const transformLinkURI = (uri: string): string => {
  return uri.match(/(.*)\.md/)?.[1] || uri;
}

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const path = _.isArray(context.params?.path) && context.params?.path || [context.params?.path];
  const markdownSource = fs.readFileSync(`${MARKDOWN_DIR}/${path?.join('/')}.md`).toString();
  const emojiFileNames = fs.readdirSync(EMOJI_DIR);

  return {
    props: {
      markdownSource,
      emojiFileNames,
      path,
    }
  }
}

export const getStaticPaths = async () => {
  const globalPaths = await deepReadDir(MARKDOWN_DIR);
  const paths = globalPaths
    .map(globalPath => globalPath.match(`${MARKDOWN_DIR}/(.*)\.md`)?.[1] )
    .filter(p => p)
    .map(p => p?.split('/'))
    .map(path => ({ params: { path } }));
  return {
    paths,
    fallback: false,
  }
}

const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => {
  return (
    <>
      <Head>
        <title>{`Eugene's Space`}</title>
        <meta name="description" content="TODO" />
        <link rel="icon" href="/icon-64.png" />
      </Head>
      <main>
        <ReactMarkdown
          children={markdownSource}
          transformLinkUri={transformLinkURI}
          rehypePlugins={[emojiPlugin(emojiFileNames), remarkGemoji]}
          components={{
            emoji: Emoji,
            h1: 'h2',
            h2: 'h3',
            h3: 'h4',
            h4: 'h5',
            h5: 'h6',
          } as any}
        />
      </main>
    </>
  );
};

export default Page;

